@charset "UTF-8";
.nav{
    width:100%;height:40px;
    background-color:#fe7a24;
}
.nav .nav-z .shopping{
    width:210px;
    background-color: #ff6a00;
    height:40px;
    margin-right: 20px;
    float:left;
    position: relative;
}
.nav .nav-z .shopping p{
    float:left;
    font-size:15px;
    font-weight:bold;
    color:#fff;
    margin-left:14px;
    line-height:40px;
}
.nav .nav-z .shopping .left-nav{
    position: absolute;
    top:0;left:0;
    background-color: #fff;
}
.nav .shopping .left-nav li{
    width:200px; 
    margin-bottom:10px; 
    margin-top: 10px;
}
.nav .shopping .left-nav span{
    font-size:14px;
    font-weight: bold;
    color:#ff6a00;
    margin-bottom:10px;
}

}
.nav .shopping .left-nav a{
    color:#454545;
    font-size:14px;
    line-height:24px;
    width:60px;
    display:inline-block;

}
.nav .nav-z ul{
    float: left;
}
.nav .nav-z .hang li{
    float: left;
    color:#fff;
    padding:10px 24px; 
    font-size:15px;
    font-weight: bold;
}
.nav .nav-z .hang li>a{
    color:#fff;
    text-decoration: none;

}
.nav .nav-z .l2{
    background-color: #ff6a00;
}
.nav .nav-z .l2:hover{
     background-color: #ff6a00;
}
.nav .nav-z li:hover{
    background-color: #fc914c;
}
    /*导航结束*/
    /*banner开始*/
.banner{
    width:100%;
}
.banner img{
    width:100%;
}
/*banner 结束*/
/*中间部分开始*/
.matter{
    width:100%;
    margin-top:20px;
}
.matter .content .gratitube,.matter .content .gratitube2,.matter .content .gratitube4{
    margin-bottom:60px;
}
.matter .content .gratitube h3,.matter .content .gratitube2 h3,
.matter .content .gratitube4 h3{
    background:url(../img/16day_list_hg_2.png) no-repeat 0 -185px;
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    color:#527D2B;
    margin:40px 0;
    height:30px;
    line-height: 30px;
    width:1200px;
}
.matter .gratitube .details,.matter .gratitube2 .details2,
.matter .gratitube3 .details3,.matter .gratitube4 .details4{
    text-align: center;
    margin-left:5px;
}
.matter .gratitube .details li,.matter .gratitube2 .details2 li,
.matter .gratitube3 .details3 li,.matter .gratitube4 .details4 li{
   width:290px;
   text-align: center;
   float: left;
   margin-right:7px;
   position: relative;
   outline:1px solid #e3d1ad;
   overflow: hidden;
   margin-bottom:24px;
}
.matter .gratitube .details .te,.matter .gratitube4 .details4 .te4{
    position: absolute;
    top:0;left:0;
    width:100%;height:100%;
    background-color:rgba(185,159,108,0.6);
    transition:all 0.8s;
    transform:translate(0,0) rotate(0deg);
    transition-delay:0.2s;
}
.matter .gratitube .details h4,.matter .gratitube4 .details4 h4{
    position: absolute;
    top:280px;left:80px;
    font-size:25px;
    font-weight:bold;
    color:#2b5d1a;
    transform:translate(0px,0) rotate(0deg);
    transition:all 1s;
    opacity:1
}
.matter .gratitube .details img,.matter .gratitube2 .details2 img,
.matter .gratitube3 .details3 img,.matter .gratitube4 .details4 img{
    width: 250px;height:273px;
    margin-bottom:12px;
    margin-top:6px;
}
.matter  .gratitube .details p,.matter .gratitube2 .details2 p,
.matter .gratitube3 .details3 p,.matter .gratitube4 .details4 p{
    display:inline-block;
    margin-bottom:10px;
}
.matter .gratitube .details p a,.matter .gratitube2 .details2 p a,
.matter .gratitube3 .details3 p a,.matter .gratitube4 .details4 p a{
    font-size:12px;
    color:#000; 
}
.matter .details span a,.matter .details2 span a,.matter .details3 span a,
.matter .details4 span a{
    font-size:12px;
    font-weight:bold; 
    color:#ff6a00;
}
.matter .gratitube .details .text,.matter .gratitube4 .details4 .text4{
    transform:translate(280px,0) rotate(0deg);
    transition:all 0.6s;
    opacity:0;
}
.matter .details .l1:hover .text{
    transform:translate(0,0) ;
    opacity:1;
    }
.matter .details .l1:hover .te{
    background-color:rgba(185,159,108,0);
}
.matter .details .l1:hover h4{
    transform:translate(-100px,-30px);
    opacity:0;
}
 /*第亲情段结束 */
 /*爱情段开始*/
 .matter .gratitube2 .details2 h4,.matter .gratitube3 .details3 h4{
    font-size: 18px;
    font-weight:bold;
    color:#2b5d1a;
 }
 .matter .gratitube2 .details2 li img{
    transition:all 0.8s;
 }
 .matter .gratitube2 .details2 li:hover img{
    transform:rotate(15deg);
 }
 /*第爱情段结束*/
 /*第永生花段开始*/
.matter .gratitube3 .details3 li{
}
.matter .gratitube3 .details3 .fangDa{
    width:260px;height:280px;
    overflow: hidden;
}
.matter .gratitube3 .details3 li img{
      transition:all 0.6s;
}
.matter .gratitube3 .details3 li:hover img{
    transform:scale(1.2);
}
/*第永生花段结束*/
/*礼品部分开始*/
.matter .details4 .l4:hover .te4{
    transform:translate(-400px,0px) rotate(0deg);
}
.matter .gratitube4 .details4 .l4:hover h4{
     transform:translate(-400px,0px) rotate(0deg);
}
.matter .gratitube4 .details4 .l4:hover .text4{
    transform:translate(0,0);
    opacity:1
}
/*礼品部分结束*/
/*中间部分结束*/
/*感恩节送花礼节开始*/
.formality{
    width:100%;
}
.formality a:hover{
    color: #737373;
}
.formality .ceremony .card{
    margin-bottom:50px;
    border:1px solid #e7e6e6;
    border-top:none;
}
.formality .ceremony h5{
    width:1200px;
    height:46px;
    line-height:46px;
    color:#737373;
    font-weight:bold;
    background-color:#ebebeb;
    text-indent:24px;
}
.formality .ceremony ul{
    float:left;
    margin-top:30px;
    margin-left:80px;
    margin-right:80px;
    margin-bottom: 14px;
}
.formality .ceremony ul li{
    font-size:12px;
    color:#737373;
    line-height:30px;
    position: relative;
}
.formality .ceremony ul li span{
    position: absolute;
    top:11px;left:-30px;
    display:inline-block;
    width:6px;height:6px;
    border-radius:3px;
    background-color:#7b7a7a;
}
/*感恩节送花礼节结束*/

/*底部开始*/
.base .league>li{
    display:inline-block;
    padding:0 29px;
    font-size:14px;
    border-right:2px solid #cecece;
}
.base a:hover{
    color: #ff6a00;
}
.base ul .choose{
    border-right:none;
}
.base .friends{
    margin-top:30px;
    text-align: center;
    margin-bottom:40px;
}
.base .friends .a2,.a3{
    display: inline-block;
    margin-top: 6px;
}
.base .friends .credit:hover img{
    transform:scale(1.1);
}
.base .members{
    text-align: center;
    margin-bottom:15px;
}
.base .members li{
    display:inline-block;
    font-size:12px;
    color:#676666;
}
.base p{
    font-size:13px;
    color:#676666;
    text-align: center;
    margin-bottom:20px;
}
/*底部结束*/
/*右侧开始*/
i{font-style:normal;}
.link-right{
    width:34px;
    height:100%;
    background-color: #595656;
    position: fixed;
    top:0;right:0;
}
.link-right a:hover{
    color:#ff6a00;
}
.link-right .quick{
    top:30%;left:0px;
}
.link-right .link-top .hello{
    width: 34px;height:34px;
     background-color:#595656;
     margin-bottom:10px;
}
.link-right .link-top li{
    position: relative;
}
.link-right .link-top .hello .personal{
    display:inline-block;
    width:24px;height:26px;
    line-height:30px;
    text-align: center;
    color:#fff;font-size:16px;
    background:url(../img/ibar_sprites.png) no-repeat -8px -7px;
    position:absolute;
    top:5px;left:5px;
 }
 .mm{
    background:url(../img/ibar_sprites.png)no-repeat 0 -303px;
    position:absolute;
   /* display:none;*/
    height:7px;width:6px;
 }
 .link-right .link-top .hello .trigon{
    top:16px;left:199px;
 }
.link-right .link-top .ibar{
    position: absolute;
    top:0;left:-201px;
    width:200px;height:180px;
    border:1px solid #ddd;
    border-right:none;
    text-align: center;
    padding-top:10px;
    display:none;
    background-color:#fff;
    z-index:9999;
}
.link-right .link-top .ibar img{
    border-radius:50%; 
    margin-bottom:10px;}
.link-right .link-top .ibar p{
    font-size:12px;
    color:#9e9d9d;

}
.link-right .ibar p a{
    color:#ff6600;
}
.link-right .link-top .ibar .dingDan{
    margin-top:26px;
    font-size:12px;
}
.link-right .link-top .dingDan span{
    top:-2px;left:48px;
    background: url(../img/ibar_sprites.png) no-repeat -46px -80px;
    display:inline-block;
    height:21px;width:21px;
}
.link-right .link-top .hello:hover{
    background-color:#ff6600;
}
.link-right .link-top .hello:hover .ibar{
    display:block;
}
.link-right .link-top .hello:hover .trigon{
    display:block;
}
.link-right .shop{
    text-align: center;
    width:34px;
    margin-bottom:10px;
  /*  margin-left:4px;*/}

.link-right .shop .tarde{
    width:26px;
    border-top:1px solid #939191;
    border-bottom:1px solid #939191;
    margin-left:4px;

}
.link-right .shop span{
    background:url(../img/ibar_sprites.png) no-repeat -9px -45px;
    height:19px;width:19px;
    position: absolute;
   top:10px;left:7px;
}
.link-right .shop .tarde p{
    width:18px;
    font-size:8px;
    color:#fff;
    margin:40px 0 42px 5px;
}
.link-right .shop .tarde .round{
    height: 20px;width:20px;
    position: absolute;
    top:90px;left:7px;
    border-radius: 50%;
    background-color: #ff6600;
    color:#fff;
    font-size:14px;
    line-height:20px;
   }
.link-right .shop:hover{
    background-color: #ff6600;
}
.link-right .shop:hover .round{
    background-color:#fff;
    color: #ff6600;
}
.link-right .keep span{
    background:url(../img/ibar_sprites.png) no-repeat -9px -82px;
    width:20px;height:18px;
    position: absolute;
    top:9px;left:7px;
}
.link-right .keep{
  width:34px;height:34px; 
  margin-bottom:10px;
}
.link-right .keep .trigon2{
    top:14px;left: 110px;

}
  .nn{
    position:absolute;
    top:0px;left:-112px;
    border:1px solid #e6e3e5;
    width:110px;height:34px;
    line-height:34px;text-align:center;
   
}
.link-right .keep .focason{
    font-size:14px;
    width:110px;height:34px;
    transform:translale(-200px, 0);
    transition:all 0.6s;
    opacity: 0;
}
.link-right .keep:hover{
    background-color: #ff6600;
}
.link-right .keep:hover .focason{
    transform:translate(0 0);
    border-right:none;
    opacity:1;
}
.link-right .keep:hover .trigon2{
    display:block;
}
.link-right .look{
    width:34px;height:34px; 
    margin-bottom:10px;
}
.link-right .look span{
    background:url(../img/ibar_sprites.png) no-repeat -9px -117px;
    width:19px;height:19px;
    position:absolute;
    top:7px;left:7px;
    z-index: 1;
}
.link-right .look .trigon3{
    top:13px;left:110px;
    z-index: 5;
}

.link-right .look .focason2{
    font-size:14px;
    width:110px;height:34px;
    transform:translate(-10px, 0);
    transition:all 0.6s;
    background-color:#fff;
    opacity:0;
    z-index: 3;
}
.link-right .look:hover{
    background-color:#ff6600;
}
.link-right .look:hover .focason2{
     transform:translate(0px, 0);
     opacity:1;
}
.link-right .phone{
    width:34px;height:34px; 
    margin-bottom:10px;
}
.link-right .phone span{
    background:url(../img/ibar_sprites.png) no-repeat -9px -153px;
    width:18px;height:18px;
    position:absolute;
    top:7px;left:9px;
}
.link-right .phone .focason3{
     font-size:14px;
    width:110px;height:34px;
    transform:translate(-10px, 0);
    transition:all 0.6s;
    background-color:#fff;
    opacity:0;
}
.link-right .phone .trigon4{
    top:13px;left:110px;}
.link-right .phone:hover{
    background-color:#ff6600;
}
.link-right .phone:hover .focason3{
     transform:translate(0px, 0);
     opacity:1;}
.link-right .online{
    width:34px;height:34px; 
    margin-bottom:10px;}
.link-right .online span{
     background:url(../img/ibar_sprites.png) no-repeat -9px -189px;
    width:18px;height:18px;
    position:absolute;
    top:7px;left:8px;
}
.link-right .online .focason4{
    font-size:14px;
    width:110px;height:34px;
    transform:translate(-10px, 0);
    transition:all 0.6s;
    background-color:#fff;
    opacity:0;
}
.link-right .online .trigon5{
    top:13px;left:110px;}
.link-right .online:hover{
    background-color:#ff6600;
}
.link-right .online:hover .focason4{
     transform:translate(0px, 0);
     opacity:1;}
.link-right .code{
    margin-top: 192px;
    width:34px;height:34px; 
}
.link-right .code span{
    background:url(../img/ibar_sprites.png) no-repeat -9px -225px;
    width:18px;height:19px;
    position:absolute;
    top:7px;left:8px;
}
.link-right .code .focason5{
    position: absolute;
    top:-94px;left: -253px;
    width: 250px;
    display:none;
}
.link-right .code .focason5>div{
    float: left;
    width: 120px;  
    font-size: 14px;    
    font-weight:bold;
    text-align: center;
}
.link-right .code .focason5 .trigon6{
    top:106px;left:252px; 
}
.link-right .code:hover{
    background-color:#ff6600;
}
.link-right .code:hover .focason5{
    display: block;
}
.link-right .labt{
    width:34px;height:34px; 
    margin-top:15px;
}
.link-right .labt span{
    background:url(../img/top_1.png) no-repeat 0px 0px;
    width: 17px;height:16px;
    position: absolute;
    top:9px;left:8px;
}
.link-right .labt .focason6{
    transform:translate(-10px, 0);
    transition:all 0.6s;
    background-color:#fff;
    opacity:0;
}
.link-right .labt .trigon7{
    top:12px;left:110px;
}
.link-right .labt:hover{
    background-color:#ff6600;
}
.link-right .labt:hover .focason6{
     transform:translate(0px, 0);
     opacity:1;
}
/*右侧结束*/